<template>
	<view>
		<uni-popup ref="popup" maskBackgroundColor="rgb(0 53 14 / 40%)" type="bottom" :mask-click="false"
			border-radius="20rpx 20rpx 0 0">
			<view class="slanted-rectangle animate__fadeInUp dh-0-6s">
				<view class="mt-40 padding-50">
					<view class="flex-dir-row ali-item-cen flex-x-bet">
						<view class="box-1" @tap="$NavigateTo('/pages/publish/article')">
							<image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/fzx.png"
								class="image-1">
							</image>
							<view class="flex-x-bet flex-dir-col full-height">
								<view class="fs-40 fw-600">发圈子</view>
								<view class="fs-28 col-54">分享美好瞬间</view>
							</view>
						</view>
						<view class="box-2" @tap="navToPublish('/pages/publish/notice')">
							<image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/ftz.png"
								class="image-2">
							</image>
							<view class="flex-x-bet flex-dir-col full-height">
								<view class="fs-40 fw-600">发通知</view>
								<view class="fs-28 col-54 mt-10">通知成员活动事项</view>
							</view>
						</view>
					</view>
					<view class="box-3" @click="navToPublish('/pages/publish/activity')">
						<image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/fhd.png"
							class="image-3">
						</image>
						<view class="flex-x-bet flex-dir-col full-height">
							<view class="fs-40 fw-600">发活动</view>
							<view class="fs-28 col-54 mt-10">开始组织你的活动</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		name: 'pageC',
		data() {
			return {
				tokenExpired: null,
			}
		},
		computed: {
			userInfo() {
				this.tokenExpired = uniCloud.getCurrentUserInfo().tokenExpired;
				return store.userInfo //用户信息
			},
		},
		mounted() {
			this.$refs.popup.open('bottom')
		},
		methods: {
			async navToPublish(path) {
				// 如果未登录或登录过期，跳转到登录页
				if (!this.userInfo._id || this.tokenExpired < Date.now()) {
					this.$NavigateTo('/qmy_user/login')
					return
				}
				if (this.userInfo?.role?.includes('organizer')) {
					this.$NavigateTo(path)
					return
				}
				// 先更新用户信息，看用户是否是组织者
				await mutations.updateUserInfo()
				if (this.userInfo?.role?.includes('organizer')) {
					this.$NavigateTo(path)
				} else {
					this.$Toast(path == '/pages/publish/notice' ? '您还没有发布活动，不能发送通知哦' : '您还没有权限发布活动，快去认证吧')
				}
			}

		}
	}
</script>

<style>
	.slanted-rectangle {
		position: relative;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 20rpx;
		bottom: -20rpx;
		z-index: 2;
	}

	.slanted-rectangle::before {
		content: '';
		position: absolute;
		top: -25rpx;
		z-index: 3;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}

	.padding-50 {
		padding: 50rpx;
	}

	.full-height {
		height: 100%;
	}

	.box-1 {
		background: #cae8ff;
		border-radius: 20rpx;
		position: relative;
		padding: 45rpx 35rpx;
		width: 48%;
		height: 190rpx;
		z-index: 4;
	}

	.image-1 {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 170rpx;
		height: 170rpx;
		z-index: 4;
	}

	.box-2 {
		background: #f2fa91;
		border-radius: 20rpx;
		position: relative;
		padding: 45rpx 35rpx;
		width: 48%;
		height: 190rpx;
		z-index: 4;
	}

	.image-2 {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 135rpx;
		height: 170rpx;
		z-index: 4;
	}

	.box-3 {
		background: #a9f5c3;
		border-radius: 20rpx;
		position: relative;
		padding: 45rpx 35rpx;
		width: 100%;
		height: 190rpx;
		margin-top: 30rpx;
		z-index: 4;
	}

	.image-3 {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 220rpx;
		height: 220rpx;
		z-index: 4;
	}
</style>